<template>
	<view class="container" :style="{height:windowHeight+'px'}">
		<darkCalendar  />
		<!-- <zwyCalendar type="calendar" checkDate="true"  @change="signDate" /> -->
		<image class="page-bg" :style="{height:windowHeight+'px'}" mode="aspectFill" src="/static/page-bg.png"></image>
		<view class="content-wrapper">
			<view>
				<view class="ad-container margin-top cu-list menu sm-border card-menu">
					<ad unit-id="adunit-b7df91d4367e062b"></ad>
				</view>
				<view class="cu-card article">
					<view class="cu-item shadow" @click="addHappiness">
						<view class="title">
							<view class="text-cut"> 头像加福字 </view>
						</view>
						<view class="content" @click="addHappiness">
							<image style="width: 160rpx; margin-top: 8px;" src="/static/image/logo/happiness-logo.png"
							 mode="widthFix"></image>
							<view class="desc">
								<view class="text-content"> 2021即将开局，我们一起祈福，头像加福，期待好运到来！</view>
								<view class="grid justify-between">
									<view>
										<view class="cu-tag bg-red light sm round">贺新年</view>
										<view class="cu-tag bg-green light sm round">集五福</view>
									</view>
									<view>
										<button class="cu-btn line-orange sm" @click="addHappiness">
										<text class="cuIcon-forward"></text> <text class="text-orange">打开</text> </button>
									</view>
								</view>
							</view>
						</view>
					</view>
				</view>
				
			</view>
			
			<view @click="showModal" data-target="Modal" id="btn-footer-oa">
				<tui-footer :fixed="true" :copyright="copyright"></tui-footer>
			</view>
			<view class="cu-modal" :class="modalName=='Modal'?'show':''">
				<view class="cu-dialog">
					<view class="cu-bar bg-white justify-end">
						<view class="content">微信搜索《够好益家》</view>
						<view class="action" @tap="hideModal">
							<text class="cuIcon-close text-red"></text>
						</view>
					</view>
					<view class="padding-xl">
						经典国学，家庭教育，积福之道
						<!-- 中外名曲，经典老歌，电影故事，夜读美文，戏剧唱段，名家书画，摄影佳作。 -->
					</view>
					<view class="padding">
						关注公众号不迷路。
					</view>
					<view class="cu-bar bg-white justify-end">
						<view class="action">
							<button class="cu-btn line-green text-green" @tap="hideModal">我知道了</button>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		mapGetters,
		mapState,
		mapMutations
	} from "vuex";
	import tuiFooter from "@/components/tui/footer";
	import tuiIcon from "@/components/tui/icon"
	import zwyCalendar from '@/components/zwy-calendar/zwy-calendar.vue'
	import darkCalendar from '@/components/dark-calendar/dark-calendar.vue'

	// 在页面中定义插屏广告
	let interstitialAd = null

	export default {
		components: {
			tuiFooter,
			tuiIcon,
			zwyCalendar,
			darkCalendar
		},
		data() {
			return {
				copyright: " Copyright © 2016-2022 够好益家公众号",
				officialAccountUrl: "https://mina-img-store-1258554429.cos.ap-shanghai.myqcloud.com/new-year-wish/renwenzhichuang.png",
				windowHeight: 0,
				webviewStyles: {
					progress: {
						color: '#FF3333'
					}
				},
				modalName: null,
				share_title:'头像加福贺新春',
				share_desc:'贺新春，贴福字，为你的头像加个福字吧',
				share_img:'/static/image/logo/happiness-logo.png'
			}
		},
		onShareAppMessage: function() {
			return {
				title: this.share_title,
				desc: this.share_desc,
				imageUrl: this.share_img,
				path: '/pages/index/index',
				success: function(e) {
					console.log(e);
				}
			};
		},
		onShareTimeline: function() {
			return {
				title: this.share_title,
				desc: this.share_desc,
				imageUrl: this.share_img,
				path: '/pages/index/index',
				success: function(e) {
					console.log(e);
				}
			};
		},
		onLoad() {
			this.windowHeight = getApp().globalData.windowHeight;
			// 在页面onLoad回调事件中创建插屏广告实例
			if (wx.createInterstitialAd) {
				interstitialAd = wx.createInterstitialAd({
					adUnitId: 'adunit-28338c7d91d145af'
				})
				interstitialAd.onLoad(() => {})
				interstitialAd.onError((err) => {
					console.log(err);
				})
				interstitialAd.onClose(() => {})
			}
		},
		onShow() {
			// 在适合的场景显示插屏广告
			console.log('interstitialAd', !!interstitialAd);
			if (interstitialAd) {
				interstitialAd.show().catch((err) => {
					console.error(err)
				})
			}
		},
		computed: {
			...mapState({
				userInfo: 'userInfo'
			})
		},
		methods: {
			tucao: function() {
				const Tucao = requirePlugin('tucao').default;
				// 初始化并触发跳转，支持链式调用
				this.wx = uni;
				Tucao.init(this, {
					productId: 120746
				}).go();
			},
			addHappiness: function() {
				console.log('addHappiness');
				// wx.navigateToMiniProgram({
				// 	appId: 'wxb8055d6d942b3690',
				// 	path: 'pages/happiness/add-happiness',
				// 	success(res) {
				// 		console.log(res);
				// 	},
				// 	fail(e) {
				// 		console.log(e);
				// 	}
				// })
				
				// 跳转到 了了头像助手
				uni.navigateToMiniProgram({
					appId: "wxcadbe5e4b2ab3aff",
					path: 'pages/index/index?id=123',
					extraData: {
						'data1': 'test'
					},
					success() {}
				})
			},
			showModal: function(e) {
				console.log(e.currentTarget.dataset);
				this.modalName = e.currentTarget.dataset.target;
			},
			hideModal: function(e) {
				this.modalName = null;
			},
			handleContact: function(e) {
				console.log(e.detail.path)
				console.log(e.detail.query)
			}
		},
	}
</script>

<style scoped>
	.content-wrapper {
		margin-top: 150rpx;
	}
	
	.about-actions{
		/* position: fixed; */
		/* bottom: 80px; */
		width: 500rpx;
		/* left: 125rpx; */
	}

	.card-menu {
		margin-left: auto;
		margin-right: auto;
	}

	.free-btn-bordernone {
		background: none !important;
		color: #000 !important;
		display: inline-block !important;
	}

	.free-btn-bordernone::after {
		border: none;
	}
	
	.ad-container {
		width: 690rpx;
	}
</style>
